<template>
  <div class="container">
    <el-card>
    <div style="margin: 10px"></div>
    <p align="center">心理咨询师申请表</p>
    <div style="margin: 20px"></div>
    <el-card>
      <el-form ref="ruleForm" :model="applyMessage" label-width="120px" :inline="true" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="applyMessage.name"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="applyMessage.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker
              v-model="applyMessage.birthday"
              type="month"
              placeholder="请选择出生年月"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="从业时间" prop="workingTime">
          <el-date-picker
              v-model="applyMessage.workingTime"
              type="month"
              placeholder="请选择从业时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="原职业资格等级" prop="certificateLevel">
          <el-select v-model="applyMessage.certificateLevel"
                     placeholder="请选择职业资格等级" style="width: 207px">
            <el-option label="一级" value="1"></el-option>
            <el-option label="二级" value="2"></el-option>
            <el-option label="三级" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="从事本职业工作时间" label-width="180px" prop="workingYear">
          <el-input v-model="applyMessage.workingYear" style="width: 70px"></el-input>&emsp;年
        </el-form-item>

        <el-form-item label="身份证号" prop="idCardNum">
          <el-input v-model="applyMessage.idCardNum"></el-input>
        </el-form-item>
      </el-form>

      <!--申请备注不能为空-->
      <el-form :model="applyMessage" label-width="120px" :rules="rules">
        <el-form-item label="备注" prop="applyDes">
          <el-input id="input-textarea" :rows="5" v-model="applyMessage.applyDes" type="textarea" maxlength="300"
                    placeholder="请输入申请备注"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <div style="margin: 20px"></div>
    <p align="center">附加材料:(附:身份证正面照一张、职业资格证书照片一张)</p>
    <div style="margin: 20px"></div>

    <el-form :model="applyMessage" label-width="200px" :inline="true">
      <el-card>
        <div style="margin: 20px"></div>
        <div>
          <div class="id-img-div">
            <el-form-item label="身份证正面照">
              <el-upload
                  ref="upload"
                  action="/api/auditManage/uploadImg"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :auto-upload="false"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-change="changeFile"
                  :file-list="fileList"
                  :on-success="handleSuccess"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </div>
          <div class="cen-img-div">
            <el-form-item label="职业资格证书照片">
              <el-upload
                  ref="upload1"
                  action="/api/auditManage/uploadImg"
                  list-type="picture-card"
                  :on-remove="handleRemove1"
                  :auto-upload="false"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-change="changeFile1"
                  :file-list="fileList1"
                  :on-success="handleSuccess1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </div>
        </div>
        </el-card>
        <div style="margin: 20px"></div>
    </el-form>

      <div style="text-align: center">
      <el-button type="primary" @click="onSubmit('ruleForm')">提交申请</el-button>
        &emsp;&emsp;&emsp;&emsp;&emsp;
      <el-button @click="resetData">重置</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
import user from "@/api/user/user";

export default {

    /*包含的参数有
    //用户id 性别gender 心理咨询师证件图片链接certificate_img
    //身份证正面照id_card_img 证件等级certificate_level 从业时间working_time
    //用户真实姓名name 身份证号id_card_num 出生年月birthday 从事本职业工作时间working_year
    //申请描述apply_des
    */
  data(){
    return{
      applyMessage: {
        userId: null,  //拿到的用户id
        name: '',
        gender: 0,
        birthday: '',
        workingYear: '',  //从事本职业工作时间
        workingTime: '',  //从业时间
        certificateLevel: '',
        idCardNum: '',
        applyDes: '',
        certificateImg: null,  //心理咨询师证件图片链接
        idCardImg: null  //身份证正面照
      },
      fileList: [],
      fileList1: [],
      userInfo: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 5,
            message: '长度应该为3-5',
            trigger: 'blur',
          },
        ],
        birthday: [
          {
            type: 'date',
            required: true,
            message: '请选择你的生日',
            trigger: 'blur',
          },
        ],
        workingTime: [
          {
            type: 'date',
            required: true,
            message: '请选择你的从业时间',
            trigger: 'blur',
          },
        ],
        workingYear: [
          {
            required: true,
            message: '请输入工作时间',
            trigger: 'blur',
          },
        ],
        certificateLevel: [
          {
            required: true,
            message: '请选择职业资格等级',
            trigger: 'blur',
          },
        ],
        idCardNum: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: 'blur',
          },
          {
            min: 18,
            max: 18,
            message: '长度应为18位',
            trigger: 'blur',
          },
        ],
        applyDes: [
          {
            required: true,
            message: '请输入申请备注',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("SESSION_KEY_USER"));
    this.applyMessage.userId = this.userInfo.id
  },
  methods: {
    handleRemove(file) {
      this.fileList.pop();
      console.log(file)
    },
    handleRemove1(file) {
      this.fileList1.pop();
      console.log(file)
    },
    changeFile(file, fileList) {
      this.fileList.pop()
      this.fileList.push(file)
    },
    changeFile1(file, fileList) {
      this.fileList1.pop()
      this.fileList1.push(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
              files.length + fileList.length
          } 个文件`,
      )
    },
    // 监听图片上传成功的事件
    handleSuccess (response) {
      console.log(response)
      console.log("dsf="+response.data.item);
      this.applyMessage.idCardImg = response.data.item;
    },
    // 监听图片上传成功的事件
    handleSuccess1 (response) {
      console.log(response)
      console.log("dsf="+response.data.item);
      this.applyMessage.certificateImg = response.data.item;

      console.log(this.applyMessage.certificateImg)
      console.log(this.applyMessage.idCardImg)
      //在下面上传所有信息
      // 包含的参数有算法名，算法类型，算法存储位置(文件名)，备注，用户id
      user.addAudit(this.applyMessage).then(resp => {
        this.$message({
          type: 'success',
          message: '申请成功'
        })
        // 申请后跳转页面
        this.$router.push("/home/index")
      }).catch(resp => {
        this.$message({
          type: 'error',
          message: resp.message + '  申请失败'
        })
      })
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fileList.length === 0
              || this.fileList1.length === 0
          ) {
            console.log(this.fileList.length)
            console.log(this.fileList1.length)
            this.$message({
              type: 'error',
              message: '您还有照片没上传噢，请上传后再申请！'
            })
          }  else {
            // alert('submit!')
            user.findAuditByUserId(this.applyMessage.userId).then(resp => {
              console.log(this.applyMessage.name)
              console.log(this.applyMessage.gender)
              console.log(this.applyMessage.birthday)
              console.log(this.applyMessage.workingYear)
              console.log(this.applyMessage.workingTime)
              console.log(this.applyMessage.certificateLevel)
              console.log(this.applyMessage.idCardNum)
              console.log(this.applyMessage.applyDes)
              // 调用 element-ui的上传方法
              this.$refs.upload.submit();
              this.$refs.upload1.submit();
            }).catch(resp => {
              this.$message({
                type: 'error',
                // message: resp.message
                message: '您已经申请过了,请等待审核结果'
              })
              // 如果是二次申请跳转页面
              this.$router.push("/home/index")
            })
          }
        } else {
          console.log('error submit!!')
          return false;
        }
      })
      // console.log('hhhh')
    },
    resetData() {
      this.applyMessage.name = '',
      this.applyMessage.gender = 0,
      this.applyMessage.birthday = '',
      this.applyMessage.workingYear = '',  //从事本职业工作时间
      this.applyMessage.workingTime = '',  //从业时间
      this.applyMessage.certificateLevel = '',
      this.applyMessage.idCardNum = '',
      this.applyMessage.applyDes = '',
      this.fileList = [];
      this.fileList1 = [];
    },

  },
}
</script>

<style scoped>
  .id-img-div {
    padding-right: 293px;
    display: inline;
  }
  .cen-img-div {
    display: inline;
  }
</style>